<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示测试者列表</title>
    <link rel="stylesheet" th:href="@{webjars/layui/2.6.8/css/layui.css}">
    <script th:src="@{webjars/layui/2.6.8/layui.js}"></script>
</head>
<body>
<form class="layui-form" id="addTester" style="display: none">
    <div class="layui-form-item layui-col-md10">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="phoneNum" id="phoneNum" placeholder="请输入手机号">
        </div>
    </div>
    <div class="layui-form-item layui-col-md10">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name" id="name" placeholder="请输入星梦">
        </div>
    </div>

    <div class="layui-form-item layui-col-md10 layui-col-md-offset2">
        <button class="layui-btn" lay-submit lay-filter="testerSubmit">提交</button>
        <button class="layui-btn layui-col-md-offset8" type="reset">重置</button>
    </div>
</form>
<form class="layui-form" style="display: none" id="updateTester" lay-filter="updateTester">
    <div class="layui-form-item layui-col-md10">
        <label class="layui-form-label">人员编号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="id" readonly>
        </div>
    </div>
    <div class="layui-form-item layui-col-md10">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="phone" placeholder="请输入手机号">
        </div>
    </div>
    <div class="layui-form-item layui-col-md10">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="username" placeholder="请输入姓名">
        </div>
    </div>

    <div class="layui-form-item layui-col-md10 layui-col-md-offset2">
        <button class="layui-btn" lay-submit lay-filter="testerUpdateSubmit">提交</button>
        <button class="layui-btn layui-col-md-offset8" type="reset">重置</button>
    </div>
</form>
<script type="text/html" id="navBar">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-sm" lay-event="delSelected">批量删除</a>
</script>
<script type="text/html" id="sideBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="selectFormfilter">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary"  id="myButton" >重置</button>
        </div>
    </div>
</form>
<table id="tester" lay-filter="tester"></table>
<script type="text/javascript" th:inline="none">
    layui.define(function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            form = layui.form;
        var myTable =table.render({
            elem: "#tester"
            , url: "/tester/selectAllPage"
            , toolbar: "#navBar"
            , page: true
            , height: 525
            , cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '人员编号', width: 150, sort: true},
                {field: 'username', title: '用户名', width: 100, sort: true},
                {field: 'phone', title: '手机号', width: 200, sort: true},
                {field: 'testTime', title: '测试时间', width: 300, sort: true},
                {field:'redCharacter',title:'红色性格'},
                {field:'blueCharacter',title:'蓝色性格'},
                {field:'yellowCharacter',title:'黄色性格'},
                {field:'greenCharacter',title:'绿色性格'},
                {title: '操作', width: 200, toolbar: "#sideBar"}
            ]]
        });
        table.on('toolbar(tester)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            var idList = [];
            for (let i = 0; i < data.length; i++) {
                idList[i] = data[i].id;
            }
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        area: ['300px', '250px'],
                        title:"添加成员",
                        content: $("#addTester")
                    });
                    break;
                case 'delSelected':
                    layer.confirm("是否要删除选中行?", {icon: 3, title: "提示"}, function (index) {
                        $.ajax({
                            url: "tester/del",
                            type: "DELETE",
                            dataType: "JSON",
                            data: {"idList": idList},
                            success: function (obj) {
                                if (obj.code === 0) {
                                    layer.close(index);
                                    layer.msg("删除成功");
                                    table.reload('tester', {
                                        page: {
                                            curr: 1
                                        }
                                    })
                                }
                            }
                        })
                    });
                    break;
            }
        });
        table.on('tool(tester)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        type: 1,
                        content: $("#updateTester"),
                        area: ['300px', '250px'],
                        title:"修改成员信息",
                        success: function () {
                            $.get("tester/findOne", {'id': obj.data.id}, function (obj) {
                                form.val('updateTester', {
                                    "id": obj.data.id,
                                    "phone": obj.data.phone,
                                    "username": obj.data.username,
                                })
                            });
                        }
                    });
                    break;
                case 'del':
                    layer.confirm("是否要删除", {icon: 3, title: "提示"}, function (index) {
                       console.log(obj.data.id);
                        $.ajax({
                            url: "tester/del",
                            data: {"idList": [obj.data.id]},
                            type: "DELETE",
                            success: function (obj) {
                                if (obj.code === 0) {
                                    layer.msg("删除成功")
                                    table.reload('tester', {
                                        page: {
                                            curr: 1
                                        }
                                    })
                                }
                            }
                        });
                        layer.close(index);
                    })
                    break;
            }
        });
        form.on('submit(testerSubmit)', function (data) {
            console.log(data)
            $.ajax({
                url: "tester/insert",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),
                type: "POST",
                success: function (data) {
                    if (data.code == 0) {
                        layer.closeAll();
                        layer.msg("添加成功");
                        table.reload('tester', {
                            page: {
                                curr: 1
                            }
                        })
                    }
                }
            });
            return false;
        })

        form.on('submit(testerUpdateSubmit)', function (data) {
            $.ajax({
                url: "tester/update",
                type: "PUT",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),
                success: function (obj) {
                    if (obj.code === 0) {
                        layer.closeAll();
                        layer.msg("修改成功");
                        table.reload('tester', {
                            page: {
                                curr: 1
                            }
                        })
                    }
                }
            });
            return false;
        })
        //====================================提交条件查询==================================================
        form.on('submit(selectFormfilter)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    username: data.field.username
                    ,phone: data.field.phone
                }
                ,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            //提交表单数据
           /* $.ajax({
                url:"/tester/selectAllPage",
                type: "POST",
                dataType:"JSON",
                data:data.field,
                success:function (ret) {
                    if(ret.code==0){
                        //刷新表格数据
                        myTable.reload({
                            where: { //设定异步数据接口的额外参数，任意设
                                name: data.field.name
                                ,phone: data.field.phone
                            }
                            ,
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }else
                    {
                        layer.msg(ret.msg,{icon: 5});
                    }

                }
            })*/
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        ///重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    name: ""
                    ,phone: ""
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

    });
</script>
</body>
</html>